<template>
    <section>
        <div class="order-container">
            <div class="header">
                <h4>设置</h4>
            </div>
            <div class="order-con">
                <el-tabs v-model="activeLabel" class="tabs-wrapper" @tab-click="handleClick">
                    <el-tab-pane label="登陆信息" name="MemberInfo"></el-tab-pane>
                    <el-tab-pane label="店铺信息" name="ShopInfo"></el-tab-pane>
                    <el-tab-pane label="认证信息" name="Authentication"></el-tab-pane>
                    <el-tab-pane label="提现方式" name="Withdraw"></el-tab-pane>
                    <el-tab-pane label="运费模版" name="Freight"></el-tab-pane>
                </el-tabs>
                <div class="table-box">
                    <router-view></router-view>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
    export default {
        // 全局感知
        name: "Setting",

        // 模板依赖
        components: { },
        filters: {},

        // 接口
        props: {},

        // 本地状态
        data () {
            return {
                activeLabel: 'MemberInfo',
            };
        },
        computed: {},

        // 事件
        watch: {},
        beforeCreate () {
        },
        created() {
            this.activeLabel = this.$route.name === 'FreightEdit' ? 'Freight': this.$route.name;
        },
        beforeMount () { },
        mounted () { },
        beforeUpdate () { },
        updated () { },
        beforeDestroy () { },
        destroyed () { },

        // 非响应式的属性
        methods: {
            handleClick() {
                this.$router.push({ name: this.activeLabel });
            },
        }
    }
</script>

<style scoped>
    .order-container {
        min-height: calc(100vh - 92px);
    }

    .flex-box {
        display: flex;
    }

    .flex-box-display {
        justify-content: space-between;
    }

    .header {
        padding: 10px;

        background: #FFFFFF;
    }

    .order-con {
        margin: 10px;
        padding: 20px;
        background: #FFFFFF;
    }

    .table-box {
        min-height: calc(100vh - 92px);
    }

</style>